<template>
  <div class="left_bottom" v-if="!$store.state.isMobile">
    <Card>
      <div slot="header" class="clearfix">
        <span>最近文章</span>
      </div>
      <div class="article_list" v-for="(item, index) in articlelist" :key="index" @click="showArticleView(item._id)">
        <Link class="article_title" @click="showArticleView(item._id)">{{item.title}}</Link>
      </div>
    </Card>
  </div>
</template>

<script>
import { Card, Link } from 'element-ui'
import { getArticlesFun } from '@/api/api'
export default {
  data () {
    return {
      articlelist:  []
    }
  },
  computed: {
    
  },
  methods: {
    showArticleView (id) {
      this.$router.push({
        path: '/article/' + id
      })
    },
    async getArticlelist(){
      const res = await getArticlesFun()
      if (res.data.code === 1) {
        this.articlelist = res.data.data
      }
    }
  },
  mounted() {
    this.getArticlelist()
  },
  components: {
    Card,
    Link
  }
}
</script>

<style lang="scss" scoped>
.left_bottom {
  width: 100%;
  border: 1px solid #e4e4e4;
  margin-top: 10px;
  height: 300px;
  .article_list {
    .article_title {
      margin: 5px 0;
      display: inline-block;
    }
  }
}
.el-card {
  height: 100%;
}
</style>
